<div class="row" style="border-bottom: 10px solid #EFEFEF;padding:10px;">
	<div class="col-lg-8">
		<div class="ukefu-measure">
			<div class="ukefu-bt"> 
				<div	class="layui-icon ukewo-btn ukefu-content-ind"><img src="/images/weixin.jpg" style="width:60px;height:60px;"></div>
				<div class="ukefu-bt-text">
					<div class="ukefu-bt-text-title"
						style="font-weight:400;font-size:24px;border-bottom:1px solid #dedede;">
							${snsAccount.name!''}
							<span style="font-size:15px;color:#AAAAAA;">公众号创建时间：${snsAccount.createtime!?string("yyyy-MM-dd HH:mm:ss")}</span>
					</div>
					<div class="ukefu-bt-text-content" style="">${snsAccount.name!''}</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row" style="border-bottom: 10px solid #EFEFEF;padding:10px;">
	<div class="col-lg-12">
		<span style="font-weight:600;">接口地址：</span>${schema!''}://${hostname!''}<#if port?? && port != '80'>:${port?string('###')}</#if>/im/weixin/<#if snsAccount.moreparam?? && snsAccount.moreparam == 'auth'>${snsAccount.appkey!''}
	<#else>${snsAccount.snsid!''}</#if>
		<span style="font-weight:600;margin-left:50px;">Token：</span>${snsAccount.token!''}
		<span style="font-weight:600;margin-left:50px;">AppID：</span>${snsAccount.appkey!''}	
	</div>
</div>
<div class="ukefu-tab-title" style="margin-left: 0px;">
	<#include "/admin/channel/weixin/include/top.html">
</div>
<div class="layui-tab">
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    	<div class="row" >
			<div class="col-lg-12">
				<h1 class="site-h1">提示语设置</h1>
				<form method="post" key="set-mine" enctype="multipart/form-data" action="/admin/weixin/tips/save.html" class="layui-form">
					<input type="hidden" name="snsid" value="${snsAccount.snsid!''}">
					<div class="row">
						<div class="col-lg-8">
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">1、人工坐席接入欢迎消息</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-12">
											<textarea name="sessionmsg" id="sessionmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.sessionmsg??>${snsAccount.sessionmsg}<#else>欢迎您来咨询！</#if></textarea>
										</div>
									</div>
								</div>
							</div>
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">2、无坐席在线提示消息</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-12">
											<textarea name="noagentmsg" id="noagentmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.noagentmsg??>${snsAccount.noagentmsg}<#else>您好，当前无人工坐席在线。</#if></textarea>
										</div>
									</div>
								</div>
							</div>
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">3、坐席忙时提示消息（排队当前位置请使用{index}替换，提示前面人数请使用{num}替换）</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-12">
											<textarea name="agentbusymsg" id="agentbusymsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.agentbusymsg??>${snsAccount.agentbusymsg}<#else>坐席全忙，已进入等待队列，在您之前，还有 {num} 位等待用户。</#if></textarea>
										</div>
									</div>
								</div>
							</div>
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">4、人工坐席分配成功提示消息（坐席使用{agent}替换）</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-12">
											<textarea name="successmsg" id="successmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.successmsg??>${snsAccount.successmsg}<#else>坐席分配成功，{agent}为您服务。</#if></textarea>
										</div>
									</div>
								</div>
							</div>
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">5、坐席服务结束提示消息</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-12">
											<textarea name="finessmsg" id="finessmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.finessmsg??>${snsAccount.finessmsg}<#else>坐席已断开和您的对话</#if></textarea>
										</div>
									</div>
								</div>
							</div>
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">6、启用工作时间段设置</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-8">
											<p>非工作时间段提醒功能</p>
											<p style="color:#888888;font-size:13px;margin-top:10px;">开启后，当前时间不在工作时间段内访问将会提示，首先需要到【客服设置】->【坐席服务日期设置】中新增坐席服务的（日期类型、工作类型）</p>
										</div>
										<div class="col-lg-4" style="text-align:right;">
											<input type="checkbox" title="启用" name="hourcheck" id="hourcheck" lay-filter="hourcheck" <#if snsAccount?? && snsAccount.hourcheck == true>checked="checked"</#if>>
										</div>
									</div>
								</div>
								<div class="box-item" id="hourcheck_tip" style="<#if snsAccount?? && snsAccount.hourcheck == false>display:none;</#if>">	
									<div class="row" style="margin-bottom:20px;">
										<div class="col-lg-12">
											<p>a、设置工作时间段<i class="layui-icon" title="工作时间段，开始时间大于结束时间时，则实行24小时制" style="font-size: 10px;">&#xe60b;</i></p>
											<p style="color:#888888;font-size:13px;margin-top:10px;">只有设置工作时间段之后，留言功能才生效</p>
										</div>
									</div>
									<div class="row" style="margin-bottom:20px;">
										<div class="col-lg-12">
											<div id="workhours">
												<#if snsAccount.config??>
													<#list snsAccount.config as sc>
														<#assign  a = sc.type>
														<#assign  b = sc.workinghours>
														<#assign  c = sc.worktype>
														<small class="ukefu-timerange layui-btn layui-btn-normal">
															<#if c == 'work'>
																${uKeFuDic[a!''].name!''}:
																<#if c == 'work'>工作<#else>非工作</#if>
																:${b}
															<#else>
																${uKeFuDic[a!''].name!''}:
																<#if c == 'work'>工作<#else>非工作</#if>
															</#if>
															
															<i class="layui-icon">&#x1006;</i>
															<input type='hidden' class='wokrtime' name='workinghours' value='${a}:${c}:${b}' data-type='${a}' data-worktype='${c}' data-hours='${b}'/>
														</small>
													</#list>
												</#if>
											</div>
										</div>
									</div>
									<div class="row" style="margin-bottom:20px;">
										<div class="col-lg-12">
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 100px;">
													<select id="wh_timetype">
														<#if workDateList??>
										      				<option value="">日期类型</option>
											      			<#list workDateList as work>
											      				<option value="${work.id}">${work.name!''}</option>
											      			</#list>
											      		</#if>
													</select>
												</div>
											</div>
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 3px;">
													:
												</div>
											</div>
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 100px;">
													<select id="wh_worktype" lay-filter="worktype">
										      				<option value="">工作类型</option>
											      			<option value="work">工作</option>
											      			<option value="nowork">非工作</option>
													</select>
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 3px;">
													:
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 70px;">
													<select id="wh_start_h">
														<#list 0..23 as hours>
														<option value="${hours?string('00')}" <#if hours == 8>selected="selected"</#if>>${hours?string('00')}</option>
														</#list>
													</select>
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 3px;">
													:
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 70px;" >
													<select id="wh_start_m">
														<#list 0..59 as min>
														<option value="${min?string('00')}" <#if min == 30>selected="selected"</#if>>${min?string('00')}</option>
														</#list>
													</select>
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 20px;">
													~
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 70px;">
													<select id="wh_end_h">
														<#list 0..23 as hours>
														<option value="${hours?string('00')}" <#if hours == 11>selected="selected"</#if>>${hours?string('00')}</option>
														</#list>
													</select>
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 3px;">
													:
												</div>
											</div>
											<div class="layui-inline work">
												<div class="layui-input-inline" style="width: 70px;">
													<select id="wh_end_m">
														<#list 0..59 as min>
														<option value="${min?string('00')}" <#if min == 30>selected="selected"</#if>>${min?string('00')}</option>
														</#list>
													</select>
												</div>
											</div>
											<div class="layui-inline">
												<div class="layui-input-inline" style="width: 70px;">
													<button class="layui-btn layui-btn-primary" type="button" id="wh_time_range"><i class="layui-icon">&#xe608;</i></button>
												</div>
											</div>
										</div>
									</div>
									<div class="row" style="margin-bottom:20px;">
										<div class="col-lg-12">
											<p>b、设置非工作时间段的提示信息</p>
											<p style="color:#888888;font-size:13px;margin-top:10px;">在微信渠道下使用或直接打开对话窗口的情况下使用</p>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<textarea name=notinwhmsg autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;">${snsAccount.notinwhmsg!'您好，当前非工作时间段。'}</textarea>	
										</div>
									</div>
								</div>
							</div>
							
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">7、启用满意度调查</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-8">
											<p>启用此功能后，客户在结束对话的时候，提示选择满意度</p>
											<p style="color:#888888;font-size:13px;margin-top:10px;">满意度调查功能，所有实时渠道适用（WebIM，微信）</p>
										</div>
										<div class="col-lg-4" style="text-align:right;">
											<input type="checkbox" title="启用" name="satisfaction" id="satisfaction" lay-filter="satisfaction" <#if snsAccount?? && snsAccount.satisfaction == true>checked="checked"</#if>>
										</div>
									</div>
								</div>
								<div class="box-item" id="satisf_op" style="<#if snsAccount?? && snsAccount.satisfaction == false>display:none;</#if>">	
									<div class="row">
										<div class="col-lg-8">
											<p>邀请访客评价的提示信息（坐席使用{agent}替换）</p>
										</div>
									</div>
									<div class="row" style="margin-top:10px;">
										<div class="col-lg-12">
											<textarea name="satisftext" id="satisftext" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.satisftext??>${snsAccount.satisftext}<#else>请对我们的服务做出评价</#if></textarea>
										</div>
									</div>
								</div>
							</div>
							<div class="ukefu-webim-prop">
								<div class="ukefu-webim-tl" style="clear:both;">8、启用坐席工作台的外部快捷回复</div>
								<div class="box-item">
									<div class="row">
										<div class="col-lg-8">
											<p>启用外部快捷回复功能，通过接口访问</p>
											<p style="color:#888888;font-size:13px;margin-top:10px;">外部接口的输入和输出参数</p>
										</div>
										<div class="col-lg-4" style="text-align:right;">
											<input type="checkbox" title="启用" name="otherquickplay" id="otherquickplay" lay-filter="otherquickplay" <#if snsAccount?? && snsAccount.otherquickplay == true>checked="checked"</#if>>
										</div>
									</div>
								</div>
								<div class="box-item" id="otherquickplay_op" style="<#if snsAccount?? && snsAccount.otherquickplay == false>display:none;</#if>">	
									<div class="row"  style="margin-bottom:20px;">
										<div class="col-lg-8">
											<p>a、外部机器人启用HTTPS访问</p>
										</div>
										<div class="col-lg-4" style="text-align:right;">
											<input type="checkbox" id="otherssl" name="otherssl" title="启用" <#if snsAccount?? && snsAccount.otherssl == true>checked="checked"</#if>>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-8">
											<p>b、外部快捷回复的搜索接口地址</p>
										</div>
										<div class="col-lg-4" style="text-align:right;">
											<input type="text" name="oqrsearchurl" id="oqrsearchurl" value="<#if snsAccount??>${snsAccount.oqrsearchurl!''}</#if>" autocomplete="off" class="layui-input" style="display:inline;">
										</div>
									</div>
									<div class="row" style="margin-top:10px;">
										<div class="col-lg-8">
											<p>c、外部快捷回复的搜索输入参数</p>
										</div>
										<div class="col-lg-4">
											<select name="oqrsearchinput">
												<option value="">请选择搜索接口输入参数格式化模板</option>
												<#if innputtemlet??>
												<#list innputtemlet as it>
												<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrsearchinput?? && snsAccount.oqrsearchinput == it.id>selected="selected"</#if>>${it.name!''}</option>
												</#list>
												</#if>
											</select>
										</div>
									</div>
									<div class="row" style="margin-top:10px;">
										<div class="col-lg-8">
											<p>d、外部快捷回复的搜索输出参数</p>
										</div>
										<div class="col-lg-4">
											<select name="oqrsearchoutput">
												<option value="">请选择搜索接口输出参数格式化模板</option>
												<#if outputtemlet??>
												<#list outputtemlet as it>
												<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrsearchoutput?? && snsAccount.oqrsearchoutput == it.id>selected="selected"</#if>>${it.name!''}</option>
												</#list>
												</#if>
											</select>
										</div>
									</div>
									
									<div class="row" style="margin-top:10px;">
										<div class="col-lg-8">
											<p>e、外部快捷回复的详情接口地址</p>
										</div>
										<div class="col-lg-4" style="text-align:right;">
											<input type="text" name="oqrdetailurl" id="oqrdetailurl" value="<#if snsAccount??>${snsAccount.oqrdetailurl!''}</#if>" autocomplete="off" class="layui-input" style="display:inline;">
										</div>
									</div>
									<div class="row" style="margin-top:10px;">
										<div class="col-lg-8">
											<p>f、外部快捷回复的详情输入参数</p>
										</div>
										<div class="col-lg-4">
											<select name="oqrdetailinput">
												<option value="">请选择详情接口输入参数格式化模板</option>
												<#if innputtemlet??>
												<#list innputtemlet as it>
												<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrdetailinput?? && snsAccount.oqrdetailinput == it.id>selected="selected"</#if>>${it.name!''}</option>
												</#list>
												</#if>
											</select>
										</div>
									</div>
									<div class="row" style="margin-top:10px;">
										<div class="col-lg-8">
											<p>g、外部快捷回复的详情输出参数</p>
										</div>
										<div class="col-lg-4">
											<select name="oqrdetailoutput">
												<option value="">请选择详情接口输出参数格式化模板</option>
												<#if outputtemlet??>
												<#list outputtemlet as it>
												<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrdetailoutput?? && snsAccount.oqrdetailoutput == it.id>selected="selected"</#if>>${it.name!''}</option>
												</#list>
												</#if>
											</select>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-3"></div>
						<div class="col-lg-9">
							<div class="layui-form-item">
					          <div class="layui-input-block">
					            <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
					            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					          </div>
					        </div>
						</div>
					</div>
				</form>
			</div>
		</div>
    </div>
  </div>
</div>

<script>
	layui.use('form', function() {
		var form = layui.form;
		form.render(); 
		form.on("switch(agent)" , function(data){
			if(data.elem.checked){
				loadURL("/admin/weixin/enable.html?id=${snsAccount.id!''}" , null , function(){
					top.layer.alert('启用人工坐席', {icon: 1});
				});
			}else{
				loadURL("/admin/weixin/disable.html?id=${snsAccount.id!''}" , null , function(){
					top.layer.alert('关闭人工坐席', {icon: 1});
				});
			}
		})
		form.on("checkbox(hourcheck)" , function(data){
			if(data.elem.checked == true){
				$('#hourcheck_tip').show();		
			}else{
				$('#hourcheck_tip').hide();
			}
		});
		form.on("checkbox(satisfaction)" , function(data){
			if(data.elem.checked == true){
				$('#satisf_op').show();		
			}else{
				
				$('#satisf_op').hide();
			}
		});
		form.on("checkbox(otherquickplay)" , function(data){
			if(data.elem.checked == true){
				$('#otherquickplay_op').show();		
			}else{
				
				$('#otherquickplay_op').hide();
			}
		});
		form.on("select(worktype)" , function(data){
			if(data.value == 'work'){
				$('.work').show();		
			}else{
				
				$('.work').hide();	
			}
		});
	});
	layui.use('element', function(){
		var element = layui.element;
	});
	
	$('#wh_time_range').on("click" , function(){
		var timeRangeTitle = null;
		if($('#wh_worktype').val() == 'work'){
			timeRangeTitle = $("#wh_timetype option:selected").text()  + ":" +$("#wh_worktype option:selected").text()  + ":" + $("#wh_start_h").val()+":"+$("#wh_start_m").val()+"~"+$("#wh_end_h").val()+":"+$("#wh_end_m").val() ;
		}else{
			timeRangeTitle = $("#wh_timetype option:selected").text()  + ":" +$("#wh_worktype option:selected").text()  ;
		}
		var	timerange = $("#wh_timetype").val()  + ":" +$("#wh_worktype").val()  + ":" + $("#wh_start_h").val()+":"+$("#wh_start_m").val()+"~"+$("#wh_end_h").val()+":"+$("#wh_end_m").val() ;
		var id = "wh_"+ $("#wh_timetype").val()+ $("#wh_start_h").val()+$("#wh_start_m").val()+$("#wh_end_h").val()+$("#wh_end_m").val() ;
		
		var result = true;
		
		$('.wokrtime').each(function(){
			var at = $(this).data("type") ;
			var ct = $(this).data("worktype") ;
			var bb = $(this).data("hours") ;
			
			var bbs = bb.split('~');
			
			
			var tt = $("#wh_timetype").val();
			var wt = $("#wh_worktype").val();
			
			var start = $("#wh_start_h").val()+":"+$("#wh_start_m").val();
			var end = $("#wh_end_h").val()+":"+$("#wh_end_m").val() ;
			
			if(at == tt){
				if(ct == wt){
					if(wt == 'nowork'){
						top.layer.alert("该日期类型已设置过【未工作】！", {icon: 1});	
						result = false;
					}else{
						if(checkTime(bbs[0],bbs[1],start,end) == false){
							result = false;
						}
					}
				}
			}
		});
		if(result == true){
			if($("#wh_timetype").val() != '' && $("#"+id).length == 0){
				$('#workhours').append("<small id='"+id+"' class='ukefu-timerange layui-btn layui-btn-normal'>"+timeRangeTitle+" <i class='layui-icon'>&#x1006;</i><input type='hidden' name='workinghours' value='"+timerange+"'/></small>");
			}else{
				top.layer.alert('请选择日期类型或工作类型', {icon: 1});
			}
		}else{
			top.layer.alert('时间段已存在', {icon: 1});
		}
		
	});
			
	$(document).on("click" , ".ukefu-timerange", function(){
		var target = $(this);
		var index = top.layer.confirm("请确认是否移除时间段？", {icon: 3, title:'提示'}, function(text, cindex){
			top.layer.close(index);
			$(target).remove() ;
		});
		
	});
	
	function checkTime (a,b,x,y) {
		var times1=[],times2 = [];
		if (a<b) {
			//未跨天
			times1.push([a,b]);
		}else{
			//跨天
			times1.push([a,"24:00"],["00:00",b]);
		}
		
		if (x<y) {
			times2.push([x,y]);
		}else{
			times2.push([x,"24:00"],["00:00",y]);
		}
		
		var flag = false;
		//循环比较时间段是否冲突
		for (var i = 0; i < times1.length; i++) {
			if (flag) break;
			for (var j = 0; j < times2.length; j++) {
				if(check(times1[i][0],times1[i][1],times2[j][0],times2[j][1])){
					flag = true;
					break;
				}
			}
		}
		if (flag) {
			//layer.msg("时间段发生冲突");
			return false;
		}else{
			
			return true;
		}
	}
	function check (a,b,x,y) {
		if(y<a||b<x){  
			return false;
		}else{
			return true;
		}
	}
</script>